<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>案例_登录</title>
    <!-- 引入bootstrap.css -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
    />
    <!-- 公共 -->
    <style>
      html,
      body {
        background-color: #edf0f5;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .container {
        width: 520px;
        height: 540px;
        background-color: #fff;
        padding: 60px;
        box-sizing: border-box;
      }

      .container h3 {
        font-weight: 900;
      }
    </style>
    <!-- 表单容器和内容 -->
    <style>
      .form_wrap {
        color: #8b929d !important;
      }

      .form-text {
        color: #8b929d !important;
      }
    </style>
    <!-- 提示框样式 -->
    <style>
      .alert {
        transition: 0.5s;
        opacity: 0;
      }

      .alert.show {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h3>欢迎-登录</h3>
      <!-- 登录结果-提示框 -->
      <div class="alert alert-success" role="alert">提示消息</div>
      <!-- 表单 -->
      <div class="form_wrap">
        <form>
          <div class="mb-3">
            <label for="username" class="form-label">账号名</label>
            <input type="text" class="form-control username" />
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input type="password" class="form-control password" />
          </div>
          <button type="button" class="btn btn-primary btn-login">登 录</button>
        </form>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 目标：建议使用network+console调试来找到问题（共有 6 处错误）
      // 有的问题不会报错，需要自己寻找关键代码来梳理
      // 最后完成登录功能

      // 获取提示框
      // 没加点
      const myAlert = document.querySelector('.alert')
      function alertFn(msg, isSuccess) {
        myAlert.classList.add('show')

        myAlert.innerText = msg
        const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
        myAlert.classList.add(bgStyle)

        setTimeout(() => {
          myAlert.classList.remove('show')
          myAlert.classList.remove(bgStyle)
        }, 2000)
      }

      document.querySelector('.btn-login').addEventListener('click', () => {
        // username也成了password 获取元素错误
        const username = document.querySelector('.username').value
        const password = document.querySelector('.password').value

        if (username.length < 8) {
          alertFn('用户名必须大于等于8位', false)
          console.log('用户名必须大于等于8位')
          return
        }
        if (password.length < 6) {
          alertFn('密码必须大于等于6位', false)
          console.log('密码必须大于等于6位')
          return
        }

        axios({
          // 地址错误
          url: 'http://hmajax.itheima.net/api/login',
          // 多加了s
          method: 'POST',
          // 应该是data不是params
          data: {
            // 参数错误
            username,
            password,
          }
        })
          .then((result) => {
            alertFn(result.data.message, true)
            console.log(result)
            console.log(result.data.message)
          })
          .catch((error) => {
            alertFn(error.response.data.message, false)
            console.log(error)
            console.log(error.response.data.message)
          })
      })
    </script>
  </body>
</html>
